<template>
  <div>App</div>
  <Sku />
  <XForm
    :schema="schema"
    :model="skuFormData"
    :rules="skuFormRules"
    @validateSuccess="validateSuccess"
  >
    <template #spuSaleAttrList>
      <el-select>
        <el-option label="华为" value="1"></el-option>
      </el-select>
      <el-button type="primary">添加销售属性</el-button>
    </template>
  </XForm>
</template>

<script lang="ts" setup>
import Sku from "./views/sku/index.vue";

defineOptions({
  name: "App",
});

import { reactive, ref } from "vue";

const skuFormData = reactive({
  skuName: "",
  skuDesc: "",
  price: 0,
  weight: 0,
});

const skuFormRules = reactive({
  // 规则名称必须和数据名称一致
  skuName: [
    {
      required: true,
      message: "请输入SKU名称",
      trigger: "blur",
    },
  ],
  skuDesc: [
    {
      required: true,
      message: "请输入SKU描述",
      trigger: "blur",
    },
  ],
  price: [
    {
      required: true,
      message: "请输入SKU价格",
      trigger: "blur",
    },
  ],
  weight: [
    {
      required: true,
      message: "请输入SKU重量",
      trigger: "blur",
    },
  ],
});

const schema = ref([
  {
    type: "el-input",
    label: "Sku名称",
    props: {
      placeholder: "请输入sku名称",
    },
    dataKey: "skuName",
    key: "skuName",
  },
  {
    type: "el-input",
    label: "Sku描述",
    props: {
      placeholder: "请输入sku描述",
      type: "textarea",
      row: 3,
    },
    dataKey: "skuDesc",
    key: "skuDesc",
  },
  {
    type: "el-input-number",
    label: "价格",
    props: {
      placeholder: "请输入sku价格",
      class: "input-number",
      "controls-position": "right",
    },
    dataKey: "price",
    key: "price",
    colSpan: 12,
  },
  {
    type: "el-input-number",
    label: "重量",
    props: {
      placeholder: "请输入sku重量",
      class: "input-number",
      "controls-position": "right",
    },
    dataKey: "weight",
    key: "weight",
    colSpan: 12,
  },
  {
    type: "el-select",
    label: "品牌",
    props: {
      placeholder: "请选择sku品牌",
    },
    dataKey: "tmId",
    key: "tmId",
    children: [
      {
        label: "华为",
        value: 1,
      },
      {
        label: "苹果",
        value: 2,
      },
      {
        label: "小米",
        value: 3,
      },
    ],
  },
  {
    type: "slot",
    slot: "spuSaleAttrList",
    label: "销售属性",
    dataKey: "spuSaleAttrList",
    key: "spuSaleAttrList",
  },
  {
    type: "QuillEditor",
    label: "编辑器",
    dataKey: "editor",
    key: "editor",
    props: {
      // theme: "snow",
      class: "editor",
    },
  },
  {
    type: "Editor",
    label: "编辑器",
    dataKey: "editor",
    key: "editor",
    props: {
      // theme: "snow",
      class: "editor",
    },
  },
]);

const validateSuccess = () => {
  console.log("表单校验通过");
};
</script>

<style scoped></style>

<style>
.input-number {
  width: 100%;
}

.input-number .el-input__inner {
  text-align: left;
}

.editor {
  width: 100%;
  height: 100px;
  padding-bottom: 50px;
}
</style>
